<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function $$(id){
				return document.getElementById(id)
			}
			function star(cxt,x,y,r) {
            var aX = x;
            var aY = y - r;
            var bX = x - Math.cos(18 * Math.PI / 180) * r;
            var bY = y - Math.sin(18 * Math.PI / 180) * r;
            var cX = x - Math.cos(54 * Math.PI / 180) * r;
            var cY = y + Math.sin(54 * Math.PI / 180) * r;
            var dX = x + Math.cos(54 * Math.PI / 180) * r;
            var dY = y + Math.sin(54 * Math.PI / 180) * r;
            var eX = x + Math.cos(18 * Math.PI / 180) * r;
            var eY = y - Math.sin(18 * Math.PI / 180) * r;
            cxt.beginPath();
            cxt.fillStyle = "yellow";
            cxt.moveTo(aX, aY);
            cxt.lineTo(cX, cY);
            cxt.lineTo(eX, eY);
            cxt.lineTo(bX, bY);
            cxt.lineTo(dX, dY);
            cxt.lineTo(aX, aY);
            cxt.fill();
            cxt.closePath();
       }
			window.onload=function(){
				var cnv=$$("canvas")
				var cxt=cnv.getContext("2d")

            cxt.clearRect(0, 0, cnv.width, cnv.height);
            var width = 300;
            var height = 200;
            var sX = 0; 
            var sY = 0; 
            var step = 10*1.5;           
            cxt.beginPath();
            cxt.lineWidth = 1;
            cxt.fillStyle = "red";
            cxt.fillRect(sX, sY, width, height);
            cxt.closePath();
            //绘制大五角星
            var bigstar = sX + 3 * step;
            var bigstarY = sY + 3 * step;
            var bigstarR = (height * 3 / 10) / 2; 
            star(cxt, bigstar, bigstarY, bigstarR);
            //绘制小五角星
            var smallstarR = (height * 1 / 10) / 2; 
 
            var smallstarX_1 = sX + 6 * step;
            var smallstarY_1 = sY + 1 * step;
            star(cxt, smallstarX_1, smallstarY_1, smallstarR);
            var smallstarX_2 = sX + 7 * step;
            var smallstarY_2 = sY + 3 * step;
            star(cxt, smallstarX_2, smallstarY_2, smallstarR);
            var smallstarX_3 = sX + 7 * step;
            var smallstarY_3 = sY + 5 * step;
            star(cxt, smallstarX_3, smallstarY_3, smallstarR);
            var smallstarX_4 = sX + 5 * step;
            var smallstarY_4 = sY + 7 * step;
            star(cxt, smallstarX_4, smallstarY_4, smallstarR);
       
				
		}
		</script>
	</head>
	<body>
		<canvas id="canvas" width="250"height="150" style="border:1px  dashed gray;"></canvas>
	</body>
</html>
